<template>
    <div>
        <tab title="搜索"></tab>

        <div style="display: flex;">
            <van-search v-model="value" placeholder="请输入搜索关键词" @update:model-value="searchFun()" style="flex: 1;" />
            <van-cell is-link @click="showPopup" style="width: 5rem;" />
        </div>

        <div v-if="value.length > 0">
            <div v-if="list.length > 0">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-card v-for="(v, i) in list" :key="i" @click="todetail(v.goods_id)" :price="v.goods_price"
                        :title="v.goods_name">
                        <template #thumb>
                            <img :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" style="width: 6rem;height: 6rem;">

                        </template>
                    </van-card>
                </van-pull-refresh>
                <!-- 右侧弹出 -->
                <van-popup v-model:show="showRight" position="right" :style="{ width: '40%', height: '100%' }" />
            </div>
            <div v-else>
                <van-empty description="暂无数据" />
            </div>
        </div>
        <div v-else>
            <p>热门搜索</p>
            <p>历史搜索</p>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import tab from '@/components/tab.vue';
import { searchApi } from '@/api/api';
import { ref, watch } from 'vue';

let value = ref(route.query.name)
let list = ref([])
const getList = () => {
    searchApi(value.value).then((res) => {
        console.log(res);
        list.value = res.data.message.goods
    })
}
getList()

// watch监听
watch(value, () => {
    getList()
})

// lodash防抖
import _ from 'lodash'
const searchFun = _.debounce(() => {
    getList()
}, 1000)


const showRight = ref(false);
const showPopup = () => {
    showRight.value = true;
};

import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        getList()
    }, 1000);
};

const todetail = (id) => {
    router.push({ path: '/detail', query: { id: id } })
}

</script>

<style lang="scss" scoped></style>